<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="houseInfo.community"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="bule">
      <van-swipe-item v-for="(item, index) in houseInfo.houseImg" :key="index">
        <img
          :src="`http://liufusong.top:8080${item}`"
          alt=""
          style="width: 100%; height: 212px; vertical-align: top"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题＆房屋信息 -->
    <van-cell-group>
      <van-cell>
        <template #title>
          <h3 style="font-weight: normal">
            {{ houseInfo.title }}
          </h3>
        </template>
        <template #label>
          <van-tag color="#e1f5f8" text-color="#39becd">{{
            houseInfo.tags[0]
          }}</van-tag>
        </template>
      </van-cell>
      <van-grid :column-num="3" class="mid-msg">
        <div>
          <h4>{{ houseInfo.price }}</h4>
          <p>租金</p>
        </div>
        <div>
          <h4>{{ houseInfo.roomType }}</h4>
          <p>房型</p>
        </div>
        <div>
          <h4>{{ houseInfo.size }}平米</h4>
          <p>面积</p>
        </div>
      </van-grid>
      <van-cell>
        <div class="HouseDetail_infoBasic">
          <div>
            <p><span>装修：</span> 精装</p>
            <p><span>楼层：</span> {{ houseInfo.floor }}</p>
          </div>
          <div>
            <p><span>朝向：</span> {{ houseInfo.oriented[0] }}</p>
            <p><span>类型：</span> 普通住宅</p>
          </div>
        </div>
      </van-cell>
    </van-cell-group>
    <!-- 地图＆房屋配套 -->
    <div class="HouseDetail_mapTitle">
      <van-cell-group>
        <!-- 地图 -->
        <van-cell>
          <template #title>
            <h4 style="font-weight: normal; font-size: 13px">
              小区：{{ houseInfo.title }}
            </h4>
            <div class="HouseDetail_map">地图占位</div>
          </template>
        </van-cell>
        <!-- 房屋配套条件渲染 -->
        <van-cell>
          <template #title>
            <h3>房屋配套</h3>
          </template>
        </van-cell>
        <van-cell>
          <div class="HouseDetail_about">
            <van-grid :column-num="5" :border="false">
              <van-grid-item
                v-for="item in select_package"
                :key="item.id"
                :text="item.name"
              >
                <template #icon
                  ><span :class="`iconfont ${item.icon}`" />
                </template>
              </van-grid-item>
            </van-grid>
          </div>
        </van-cell>
        <!-- 房屋概况 -->
        <div class="HouseDetail_houseTitle">
          <van-cell>
            <template #title>
              <h3>房屋概况</h3>
            </template>
          </van-cell>
          <div class="HouseDetail_User">
            <van-card>
              <template #thumb>
                <van-image
                  round
                  width="80"
                  height="80"
                  src="https://i1.hdslb.com/bfs/garb/item/f8498be6ba4e87e7469943abafa27fff9975c658.png@360w_360h.webp"
                  alt=""
                />
              </template>

              <template #title>
                <h4>王女士</h4>
              </template>

              <template #desc>
                <p style="font-size: 12px; color: darkgrey">
                  <span
                    class="iconfont icon-renzheng"
                    style="color: red"
                  ></span>
                  已认证房主
                </p>
              </template>
            </van-card>
            <button class="user-btn">发消息</button>
            <div class="HouseDetail_Info">
              1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
              2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
              3.人车分流，环境优美。
              4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
            </div>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <van-cell>
          <template #title>
            <h3>猜你喜欢</h3>
          </template>
        </van-cell>
        <van-list class="like-list">
          <houses-item
            v-for="(item, index) in likeList"
            :key="index"
            :houseInfo="item"
          ></houses-item>
        </van-list>
      </van-cell-group>
    </div>
    <div class="HouseDetail_Footer">
      <button>
        <span
          :class="['iconfont', 'icon-shoucang', { bgc: isFavorite }]"
          @click="addFavorite"
        ></span>
        收藏
      </button>
      <button>咨询</button>
      <button>电话预约</button>
    </div>
  </div>
</template>
<script>
import {
  housesInfoApi,
  AddFavoriteApi,
  DelFavoriteApi,
  CheckFavoriteApi,
} from "@/api";
import HousesItem from "@/components/HousesItem.vue";
export default {
  name: "HouseMessage",
  data() {
    return {
      id: this.$route.query.id, //房屋信息查询对应的id
      houseInfo: {},
      house_package: [
        {
          id: 1,
          name: "衣柜",
          icon: "icon-yigui",
        },
        {
          id: 2,
          name: "洗衣机",
          icon: "icon-xiyiji",
        },
        {
          id: 3,
          name: "空调",
          icon: "icon-kongtiao",
        },
        {
          id: 4,
          name: "天然气",
          icon: "icon-tianranqi",
        },
        {
          id: 5,
          name: "冰箱",
          icon: "icon-bingxiang",
        },
        {
          id: 6,
          name: "暖气",
          icon: "icon-nuanqi",
        },
        {
          id: 7,
          name: "电视",
          icon: "icon-lcd",
        },
        {
          id: 8,
          name: "热水器",
          icon: "icon-reshuiqi",
        },
        {
          id: 9,
          name: "宽带",
          icon: "icon-kuandai",
        },
        {
          id: 10,
          name: "沙发",
          icon: "icon-sofa",
        },
      ],
      select_package: [],
      likeList: [
        {
          desc: "三室/666/南/武圣东里",
          houseCode: "3c0cb164-dba2-f3e7",
          houseImg: "/uploads/upload_06b0eb736244a77aa791c35fca077e6e.webp",
          price: 6666,
          tags: ["近地铁"],
          title: "東雲研究所",
        },
        {
          desc: "三室/666/南/武圣东里",
          houseCode: "3c0cb164-dba2-f3e7",
          houseImg: "/uploads/upload_06b0eb736244a77aa791c35fca077e6e.webp",
          price: 6666,
          tags: ["近地铁"],
          title: "東雲研究所",
        },
        {
          desc: "三室/666/南/武圣东里",
          houseCode: "3c0cb164-dba2-f3e7",
          houseImg: "/uploads/upload_06b0eb736244a77aa791c35fca077e6e.webp",
          price: 6666,
          tags: ["近地铁"],
          title: "東雲研究所",
        },
      ],
      isFavorite: false, // 由请求决定，目前暂时先给默认值
    };
  },
  components: { HousesItem },
  computed: {
    isLogin() {
      return !!this.$store.state.tokenLogin.token;
    },
  },
  methods: {
    selectPackage() {
      return this.house_package.filter((item) =>
        this.houseInfo.supporting.find((ele) => ele === item.name)
      );
    },
    async addFavorite() {
      if (this.isLogin) {
        // 已登录 调用请求
        this.isFavorite = !this.isFavorite;
        // 处于已收藏状态，再次点击调用删除收藏接口
        if (!this.isFavorite) {
          try {
            await DelFavoriteApi(this.id);
            this.$toast.success("移除收藏成功");
          } catch (error) {
            this.$toast.fail("移除收藏失败，请刷新后重试");
          }
          return;
        }
        try {
          await AddFavoriteApi(this.id);
          this.$toast.success("添加收藏成功");
        } catch (error) {
          this.$toast.fail("添加收藏失败，请刷新后重试");
        }
        return;
      }
      // 没登录 弹框提示用户是否前往登录
      this.$dialog
        .confirm({
          title: "東雲租房实业",
          message: "您还未登录，是否跳转登录页面",
        })
        .then(() => {
          // 前往登录
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  async created() {
    // console.log(this.$route.query.id);
    //检查是否收藏
    const res1 = await CheckFavoriteApi(this.id);
    this.isFavorite = res1.data.body.isFavorite;

    const res = await housesInfoApi(this.id);
    // console.log(res);
    this.houseInfo = res.data.body;
    this.select_package = this.selectPackage();
    // console.log(this.select_package);
  },
};
</script>
<style lang="less" scoped>
// 轮播图样式
// .swipe-img {
//   :deep(img) {
//     width: 100%;
//   }
// }
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.nav-bar {
  :deep(.van-nav-bar__content) {
    background-color: #21b97a;
    .van-nav-bar__title {
      color: aliceblue;
    }
  }
  .mid-msg {
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    h4 {
      color: #fa5741;
      font-size: 18px;
      font-weight: bolder;
      margin: 10px 0;
    }
    p {
      font-size: 14px;
      color: #999;
      margin: 10px 0;
    }
  }
  .HouseDetail_mapTitle {
    :deep(.van-cell) {
      padding: 0 16px;
    }
    .HouseDetail_map,
    .HouseDetail_about {
      width: 100%;
      height: 145px;
    }
    .HouseDetail_about {
      .iconfont {
        font-size: 23px;
      }
      :deep(.van-grid-item__text) {
        font-size: 14px;
      }
    }
    .HouseDetail_houseTitle {
      .HouseDetail_User {
        position: relative;
        :deep(.van-card) {
          background-color: #fff;
        }
        .user-btn {
          position: absolute;
          top: 35px;
          right: 10px;
          width: 74px;
          height: 29px;
          color: #33be85;
          border: 1px solid #33be85;
          border-radius: 3px;
          padding: 3px 15px;
          font-size: 14px;
          background-color: #fff;
        }
        .HouseDetail_Info {
          line-height: 1.6;
          padding: 10px;
          font-size: 14px;
          color: #333;
        }
      }
    }
    .like-list {
      margin-bottom: 45px;
    }
  }
  .HouseDetail_Footer {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 390px;
    height: 50px;
    button {
      border: 0.2px solid #e8e8e9;
      flex: 1;
      background-color: #fff;
      color: #999;
    }
    button:last-child {
      background-color: #21b97a;
      color: #fff;
    }
    .bgc {
      color: #fa5741;
    }
  }
}

.HouseDetail_infoBasic {
  display: flex;
  font-size: 13px;
  div {
    flex: 1;
  }
  span {
    color: #999;
  }
}
</style>
